<template>
<div class="card">
  <van-cell title="凡星艺彩">
    <template #right-icon>
      <span class="custom-title" style="color: #ee0a24">{{payState == 1 ? '已支付':'待支付'}}</span>
    </template>
  </van-cell>
  <van-card
    :num="order.number"
    :price="order.unitPrice.toFixed(2)"
    :desc="order.submitTime"
    :title="order.name"
    :thumb="order.mainImage"
  >
    <template #footer>
      <!--            总计-->
      <div class="cardTotal">共{{order.number}}个 合计：<span>￥{{ order.orderAmount }}</span></div>
      <van-button size="mini" @click="toPayInfo">查看详情</van-button>
      <!--            多种情况-->
      <van-button size="mini" v-if="payState == 0" @click="toPayInfo" style="background-color: #ff6400;color: #fff;border: 0">去支付</van-button>
      <van-button size="mini" color="#ee0a24" plain @click="deleteOne">删除</van-button>
    </template>
  </van-card>
</div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  name: 'cartItemList',
  props:{
    payState: {
      type: Number,
      default: 0
    },
    // order列表数据
    order: {
      type: Object,
      default: () => {}
    },
  },
  methods: {
    toPayInfo () {
      this.$router.push('/PayInfo?orderId='+this.order.orderId + '&&payState='+this.payState)
    },
    deleteOne(){
      let _this = this;
      Dialog.confirm({
        title: '删除订单',
        message: '请确认是否删除此订单？',
      }).then(() => {
        // on confirm
        this.$http.post('/actOrder/delById', this.order.orderId).then(res => {
          if (res.state == '200') {
            this.$toast('删除成功');
            _this.$emit('click');
          }else{
            this.$toast(res.message)
          }
        })
      }).catch(() => {
        console.log('取消删除')
      });
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  /deep/ .van-card{
    margin-top: 0;
  }
  /deep/ .van-card__content {
    .van-card__title{
      font-size: 15px;
      margin-bottom: 5px;
    }
  }
  /deep/ .van-card__footer {
    border-top: 1px solid #f1f1f1;
    margin-top: 5px;
    padding: 10px 0;

    .cardTotal {
      font-size: 12px;
      padding-bottom: 5px;
      color: #333;

      span {
        color: #000;
        font-weight: 600;
      }
    }
  }
}
</style>
